<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>

    <div class="container">
      <!-- <ul class="list">
        <li class="db" @click="path_url('/information/list?type=' + item.key)" v-for="(item,k) in datalist" :key="k">
          <div class="ico rel">
            <span v-if="item.unreadCount" class="abs">{{item.unreadCount}}</span>
            <img :src="item.icon" alt="">
          </div>
          <div class="flexs">
            <div class="n">{{ item.type }}</div>
            <p class="n text-overflow">{{ item.content }}</p>
          </div>
          <div class="str">
            <div class="time">{{item.date}}</div>
            <div class="static" v-if="item.unreadCount > 0"></div>
          </div>
        </li>
      </ul> -->

      <ul class="list">
        <li
          class="wrap bet"
          @click="path_url('/information/list?type=' + item.key)"
          v-for="(item, k) in datalist"
          :key="k"
        >
          <div class="title">
            <img :src="item.icon" alt="" />
            <div class="content">
              <div class="name">{{ item.type }}</div>
              <div class="time">{{ item.date }}</div>
            </div>
          </div>
          <div class="dot" v-if="item.unreadCount > 0"></div>
        </li>
      </ul>

      <div class="no-more">No more</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: this.$t("title.doc35"),
      datalist: [],
    };
  },

  mounted() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      this.$post(this.URL.member.message_type, {}).then((res) => {
        if (res.code == 0) {
          this.datalist = res.data.list;
        } else {
          this.$toast(res.message);
        }
      });
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  margin-top: 0.32rem;

  li {
    border-bottom: var(--COborder3);
    font-size: 0.26rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 0.36rem;
    position: relative;
    border-radius: 12px;
    background: #181c21;
    margin-bottom: 0.2rem;
    padding: 0.28rem 0rem 0.26rem 0.32rem;

    .title {
      display: flex;
      align-items: center;
      gap: 0.24rem;

      img{
        width: 0.64rem;
      }

      .content {
        .name {
          font-size: 0.32rem;
          font-weight:600;
          color: var(--COcolor3);
          padding-right: 0.2rem;
          margin-bottom: 0.1rem;
        }

        .time {
          color: var(--COcolor1);
        }
      }
    }

    .dot {
      position: absolute;
      top: 0.4rem;
      right: 0;
      width: 0.16rem;
      height: 0.16rem;
      background: #e72a2a;
      border-radius: 50%;
    }

    &:last-child {
      border: 0;
    }
  }
}

// .list {
//   padding-top: .2rem;
//   li {
//     position: relative;
//     padding-bottom: .32rem;
//     margin-bottom: .32rem;
//     &:after {
//       content:'';
//       display: block;
//       width: 100%;
//       position: absolute;
//       bottom:0;left:1.24rem;
//       background: #202020;height: .02rem;
//     }
//     &:last-child {
//       &:after {
//         display: none;
//       }
//     }
//     .ico {
//       width: .92rem;
//       margin-right: .32rem;
//       img {
//         height: .92rem;
//         width: 100%;
//         border-radius: 50%;
//       }
//       span {
//         display: block;
//         background: #F44343;
//         color: #fff;
//         padding: .02rem .04rem;
//         right: -.06rem;
//         top:-.06rem;
//         font-size: .2rem;
//         min-width: .3rem;height: .3rem;border-radius: .15rem;
//         line-height: .26rem;
//         text-align: center;
//       }
//     }
//     .n {
//       font-size: .3rem;
//       font-weight: 400;
//       color: rgba(255,255,255,0.90);
//       line-height: .42rem;
//       margin-bottom: .16rem;
//     }
//     p {
//       font-size: .26rem;
//       font-weight: 400;
//       color: rgba(255,255,255,0.50);
//       line-height: .36rem;
//     }
//     .time {
//       font-size: .24rem;
//       font-weight: 500;
//       color: rgba(255,255,255,0.50);
//       line-height: .34rem;
//       margin-bottom: .34rem;
//     }
//     .static {
//       width: .18rem;
//       height: .18rem;
//       background: #F44343;
//       border-radius: 50%;
//       float: right;
//     }
//   }
// }

.no-more {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-family: var(--font-family-Font-1, Sora);
  font-size: 0.24rem;
  font-weight: var(--font-weight-400, 400);
  line-height: 43px; /* 355.372% */
}
</style>
